html,body{
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow-x: hidden;
}
.map{
  height: auto;
  width: 100%;
  top: 41px;
  bottom: 0px;
  position: absolute;
  bottom: 84px;
}
#keyword{
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1;
  width: 100%;
}
.title{
  font-weight: 500;
  height: 40px;
  line-height: 50px;
  background-color: #f0f0f0;
}
.info{
  white-space:nowrap; 
  font-size: 12px;
  width:auto !important;
  top: 41px;
  color: red !important;
  z-index: 1;
  height: 24px;
  line-height: 24px;
  opacity: 0;
  pointer-events:none;
  background-color: rgba(250,250,250,0.9);
}

.top{
  color:grey;
  text-align: center;
  width: 100%;
  position: absolute;
  border-bottom: solid 1px silver;
}
.bottom {
  color:grey;
  text-align: left;
  height: 35px;
  line-height: 30px;
  width: 100%;
  position: absolute;
  border-top: solid 1px silver;
  background-color: #f8f8f8;
}
.start{
  bottom: 48px
}
.end{
  bottom: 0px;
}
#origin,#destination{
  color: black;
}
.bottom img{
  margin-right: 5px;
  margin-left: 11px;
  float: left;
  width: 10px;
  margin-top: 12px;
}
.bottomright{
  margin:3px 3px 3px 30px;
  left: 35px;
  border: none;
}
input{
  width: 99%;
  outline: none;
  border: none;
  font-size: 15px;
   background-color: transparent;
  height: 32px;
}
.showOnce{
  animation:showthenhide 4s linear;
  -webkit-animation:showthenhide 4s linear;
}
@-webkit-keyframes showthenhide
{
  0% {opacity:0;left: 100%}
  50% {opacity:1;left: 0}
  100% {opacity:0;left: -100%}
}
@keyframes showthenhide
{
  0% {opacity:0;left: 100%}
  50% {opacity:1;left:0}
  100% {opacity:0;left: -100%}
}
.right{
  width: 100%;
  height: 100%;
  position: absolute;
  background: white;
  top: 0;
}
.rightShow{
  left: -100%;
}
.showRight{
  animation:showRight 0.5s linear;
  -webkit-animation:showRight 0.5s linear;
}
.showLeft{
  animation:showLeft 0.5s linear;
  -webkit-animation:showLeft 0.5s linear;
}
@-webkit-keyframes showLeft
{
  0% {left: -100%}
  100% {left: 0}
}
@keyframes showLeft
{
  0% {left: -100%}
  100% {left: 0}
}
@-webkit-keyframes showRight
{
  0% {left:0}
  100% {left: -100%}
}
@keyframes showRight
{
  0% {left: 0}
  100% {left: -100%}
}
.right img{
  float: right;
  top: 7px;
  position: absolute;
  width: 26px;
  right: 10px;
}
.right input{
  border: 1px solid #aaf;
  border-radius: 4px;
  padding-left: 5px;
}
.right .top{
  border: none;
  top: 41px;
}
.right .title{
  top: 0px;
}
#searchResult{
  height: auto;
  top: 82px;
  bottom: 0px;
  position: absolute;
  width: auto;
  margin: 3px;
  right: 0px;
  left: 0px;
}
.amap-sug-result{
  z-index: 10000;
}
.amap_lib_placeSearch_page{
  padding: 0;
  margin: 3px;
  background-color: #fafafa
}
.left,.right{
  width: 50%;
  height: 100%;
  position: absolute;
}
header a{
  float: left;
  margin-left: 5px;
  color: #aaa;
  z-index: 2;
  position: absolute;
  top: 0;
  left:0;
}
header div{
  position: absolute;
  width: 100%;
  z-index: 1;
}
.left{
  float: left;
}
.right{
  float: right;
  left: 50%;
}
.pageLink{
  margin: 3px;
}
#locating{
    color: #8dd;
    width:200px;
    height: 24px;
    text-align: center;
    background: rgba(255,255,255,0.9);
    padding: 5px 0px;
    border: 1px solid;
    border-radius: 5px;
    position:fixed;
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
}
#locating img{
    float: left;
    position: absolute;
    left: 22px;
    top: 8px;
}
.customControl{
  width:0px;height:0px;overflow:visible;position:absolute;top:50%;left:50%;
}
.customControl img{
  width: 19px;
  height: 32px;
  left: -11px;
  top: -33px;
  position: absolute
}